<template>
  <div class="project">
    <!-- 市州设备情况  -->
    <div class="wrapper">
      <div class="wb_header">
        <div>市州设备情况</div>
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="普适型品类" name="first"></el-tab-pane>
        <el-tab-pane label="综合型品类" name="second"></el-tab-pane>
        <el-tab-pane label="监测辅助设备" name="third"></el-tab-pane> 
      </el-tabs> 
      <el-table v-loading="loading" :data="configList">   
        <el-table-column label="项目名称" align="center" prop="projectName" />
        <el-table-column label="设备总数" width="140" align="center" prop="devSum" :show-overflow-tooltip="true" />
        <el-table-column label="在线设备" width="140" align="center" prop="devOnline" :show-overflow-tooltip="true" />
        <el-table-column label="掉线设备" align="center" prop="devOffstream" :show-overflow-tooltip="true" />
        <el-table-column label="禁用设备" width="140" align="center" prop="devUnactivated" :show-overflow-tooltip="true" />
        <el-table-column label="未激活设备" width="140" align="center" prop="equipmentUnderMaintenance" :show-overflow-tooltip="true" />
        <el-table-column label="维护中设备" align="center" prop="equipmentEndMaintenance" :show-overflow-tooltip="true" />  
        <el-table-column label="维护结束设备" align="center" prop="onlineRate" :show-overflow-tooltip="true" />  
        <el-table-column label="设备在线率" align="center" prop="configKey" >
          <template slot-scope="scope">
            <div class="cell" v-if="scope.row.onlineRate">
              <el-progress :text-inside="true" :stroke-width="15" :color="colors" :percentage="scope.row.onlineRate"></el-progress>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <!-- <template slot-scope="scope"> -->
          <template> 
            <el-button size="mini" type="text">查看详情</el-button>   
          </template>
        </el-table-column>
      </el-table>   
      <!-- <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" /> -->
    
    </div>
  </div>
</template>

<script>
export default {
data() {
  return {
    activeName: "first",
    queryFrom: {},
    loading: false,
    configList: [
      {"projectName":"常德市地灾监测项目","devSum":18,"devOnline":18,"devOffline":0,"devOffstream":0,"devUnactivated":0,"equipmentUnderMaintenance":0,"equipmentEndMaintenance":0,"onlineRate":100},
      {"projectName":"常德省厅普适型监测项目","devSum":36,"devOnline":35,"devOffline":1,"devOffstream":0,"devUnactivated":0,"equipmentUnderMaintenance":0,"equipmentEndMaintenance":0,"onlineRate":97.22},
      {"projectName":"湖南省石门县南北镇潘坪村雷家山滑坡","devSum":0,"devOnline":0,"devOffline":0,"devOffstream":0,"devUnactivated":0,"equipmentUnderMaintenance":0,"equipmentEndMaintenance":0,"onlineRate":null},
      {"projectName":"常德普适型地灾监测（1170）","devSum":499,"devOnline":435,"devOffline":64,"devOffstream":0,"devUnactivated":0,"equipmentUnderMaintenance":0,"equipmentEndMaintenance":0,"onlineRate":87.17},
      {"projectName":"常德市澧县甘溪镇顺桥地灾监测项目","devSum":0,"devOnline":0,"devOffline":0,"devOffstream":0,"devUnactivated":0,"equipmentUnderMaintenance":0,"equipmentEndMaintenance":0,"onlineRate":null},
      {"projectName":"鼎城区2021年地质灾害普适型监测预警项目","devSum":37,"devOnline":35,"devOffline":2,"devOffstream":0,"devUnactivated":0,"equipmentUnderMaintenance":0,"equipmentEndMaintenance":0,"onlineRate":null}
    ],
    total: 1,
    queryParams:{
      pageNum: 1,
      pageSize: 10,
    },
    devTypeList:[
      {label: "未激活",value: "0"},
      {label: "在线",value: "1"},
      {label: "离线",value: "2"},
      {label: "已禁用",value: "3"},
      {label: "维护中",value: "4"},
      {label: "维护结束",value: "5"}
    ],
    colors: [ 
      {color: '#f56c6c', percentage: 70},
      {color: '#e6a23c', percentage: 80},
      {color: '#67c23a', percentage: 95},
      {color: '#67c23a', percentage: 100}
    ]
  }
},
methods:{
  getList(){}, 
  handleClick(item) { 
    switch (item.label) {
      case "普适型品类":
        this.configList = [
          {"projectName":"常德市地灾监测项目","devSum":18,"devOnline":18,"devOffline":0,"devOffstream":0,"devUnactivated":0,"equipmentUnderMaintenance":0,"equipmentEndMaintenance":0,"onlineRate":100},
          {"projectName":"常德省厅普适型监测项目","devSum":36,"devOnline":35,"devOffline":1,"devOffstream":0,"devUnactivated":0,"equipmentUnderMaintenance":0,"equipmentEndMaintenance":0,"onlineRate":97.22},
          {"projectName":"湖南省石门县南北镇潘坪村雷家山滑坡","devSum":0,"devOnline":0,"devOffline":0,"devOffstream":0,"devUnactivated":0,"equipmentUnderMaintenance":0,"equipmentEndMaintenance":0,"onlineRate":null},
          {"projectName":"常德普适型地灾监测（1170）","devSum":499,"devOnline":435,"devOffline":64,"devOffstream":0,"devUnactivated":0,"equipmentUnderMaintenance":0,"equipmentEndMaintenance":0,"onlineRate":87.17},
          {"projectName":"常德市澧县甘溪镇顺桥地灾监测项目","devSum":0,"devOnline":0,"devOffline":0,"devOffstream":0,"devUnactivated":0,"equipmentUnderMaintenance":0,"equipmentEndMaintenance":0,"onlineRate":null},
          {"projectName":"鼎城区2021年地质灾害普适型监测预警项目","devSum":37,"devOnline":35,"devOffline":2,"devOffstream":0,"devUnactivated":0,"equipmentUnderMaintenance":0,"equipmentEndMaintenance":0,"onlineRate":null}
        ]
        break; 
      case "综合型品类":
        this.configList = [
          {"projectName":"常德市地灾监测项目","devSum":22,"devOnline":14,"devOffline":8,"devOffstream":0,"devUnactivated":0,"equipmentUnderMaintenance":0,"equipmentEndMaintenance":0,"onlineRate":63.64},
          {"projectName":"常德省厅普适型监测项目","devSum":0,"devOnline":0,"devOffline":0,"devOffstream":0,"devUnactivated":0,"equipmentUnderMaintenance":0,"equipmentEndMaintenance":0,"onlineRate":null},
          {"projectName":"湖南省石门县南北镇潘坪村雷家山滑坡","devSum":14,"devOnline":0,"devOffline":0,"devOffstream":0,"devUnactivated":14,"equipmentUnderMaintenance":0,"equipmentEndMaintenance":0,"onlineRate":null},
          {"projectName":"常德普适型地灾监测（1170）","devSum":0,"devOnline":0,"devOffline":0,"devOffstream":0,"devUnactivated":0,"equipmentUnderMaintenance":0,"equipmentEndMaintenance":0,"onlineRate":null},
          {"projectName":"常德市澧县甘溪镇顺桥地灾监测项目","devSum":12,"devOnline":2,"devOffline":10,"devOffstream":0,"devUnactivated":0,"equipmentUnderMaintenance":0,"equipmentEndMaintenance":0,"onlineRate":16.67},
          {"projectName":"鼎城区2021年地质灾害普适型监测预警项目","devSum":0,"devOnline":0,"devOffline":0,"devOffstream":0,"devUnactivated":0,"equipmentUnderMaintenance":0,"equipmentEndMaintenance":0,"onlineRate":null}
          
        ]
        break; 
      case "监测辅助设备":
        this.configList = [
          {"projectName":"常德市地灾监测项目","devSum":0,"devOnline":0,"devOffline":0,"devOffstream":0,"devUnactivated":0,"equipmentUnderMaintenance":0,"equipmentEndMaintenance":0,"onlineRate":null},
          {"projectName":"常德省厅普适型监测项目","devSum":0,"devOnline":0,"devOffline":0,"devOffstream":0,"devUnactivated":0,"equipmentUnderMaintenance":0,"equipmentEndMaintenance":0,"onlineRate":null},
          {"projectName":"湖南省石门县南北镇潘坪村雷家山滑坡","devSum":0,"devOnline":0,"devOffline":0,"devOffstream":0,"devUnactivated":0,"equipmentUnderMaintenance":0,"equipmentEndMaintenance":0,"onlineRate":null},
          {"projectName":"常德普适型地灾监测（1170）","devSum":4,"devOnline":4,"devOffline":0,"devOffstream":0,"devUnactivated":0,"equipmentUnderMaintenance":0,"equipmentEndMaintenance":0,"onlineRate":100},
          {"projectName":"常德市澧县甘溪镇顺桥地灾监测项目","devSum":8,"devOnline":8,"devOffline":0,"devOffstream":0,"devUnactivated":0,"equipmentUnderMaintenance":0,"equipmentEndMaintenance":0,"onlineRate":100},
          {"projectName":"鼎城区2021年地质灾害普适型监测预警项目","devSum":0,"devOnline":0,"devOffline":0,"devOffstream":0,"devUnactivated":0,"equipmentUnderMaintenance":0,"equipmentEndMaintenance":0,"onlineRate":null}
        ]
        break; 
    }
  }
}
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/tablePage.scss";  
.footer{
  div{
    margin-top: 10px;
    font-size: 15px;
    color: #303133;
  }
}
.input_inner_selct{
  width: 100px;
}
</style>